import GpContainer from "@/components/GpContainer";
import GpFontIcon from "@/components/GpFontIcon";
import GpNavbar from "@/components/GpNavbar";
import { useNavigationOpacity } from "@/hooks/useNavigationOpacity";
import { FloatingPanel, Popup, SafeArea, TextEllipsis } from "@taroify/core";
import { Image, ScrollView, Swiper, SwiperItem, Text, View } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import clsx from "clsx";
import { useImmer } from "use-immer";
import "@taroify/core/text-ellipsis/index.css";
import { GpTouchableView } from "@/components/GpTouchableView";
import { useEffect, useMemo, useState } from "react";
import { getHomecompanydetailCompanyId, getHomecompanyjobsCompanyId } from "@/apis/endpoint/home";
import { CompanyInfoResult, CompanyPictureRequest, CompanyVideoRequest, HomeJobListResult } from "@/apis/endpoint/model";
import { isSetValue } from "@/utils/helper";
import GpVerticelLine from "@/components/GpVerticelLine";
import Taro from "@tarojs/taro";
import { Forwards, Gifts, Powers } from "./data";
import { bd09togcj02 } from "@/utils/coor-transform";
import { pageMapper } from "@/constants/pageMap";
import { navigate } from "@/utils/navigation";
import { getSalaryText } from "@/utils/app";
import { getWindowInfo } from "@/utils/layout";
import { NAVIGATION_BASE_LAYOUT } from "@/hooks/useLayout";

interface RouteParams {
  id: string
  [key: string]: string
}

export default function Index() {
  const params = useRouter<RouteParams>().params
  const [opacity] = useNavigationOpacity()
  const [intro, setIntro] = useImmer({
    items: [
      {
        value: 0,
        label: "企业简介",
        content: ""
      },
      {
        value: 1,
        label: "发展历程",
        content: ""
      },
      {
        value: 2,
        label: "获得荣誉",
        content: ""
      },
      {
        value: 3,
        label: "企业文化",
        content: ""
      }
    ],
    current: 0
  })
  const [album, setAlbum] = useImmer({
    items: [
      {
        value: 0,
        label: "公司视频",
        items: [] as CompanyVideoRequest[]
      },
      {
        value: 1,
        label: "公司照片",
        items: [] as CompanyPictureRequest[]
      }
    ] as const,
    current: 0
  })
  const [development, setDevelopment] = useImmer({
    forward: {
      label: "晋升制度",
      items: [] as string[]
    },
    gift: {
      label: "人才激励",
      items: [] as string[]
    },
    power: {
      label: "能力培养",
      items: [] as string[]
    }
  })
  const [info, setInfo] = useState<INullable<CompanyInfoResult>>(null)
  const [overlay, setOverlay] = useImmer({
    intro: {
      open: false,
      active: 0
    },
    worktime: {
      open: false
    },
    development: {
      open: false
    },
    media: {
      picture: false,
      video: false
    },
    product: {
      open: false,
      current: 0
    }
  })
  const [navigationHeight, setNavigationHeight] = useState(NAVIGATION_BASE_LAYOUT.navigationHeight + NAVIGATION_BASE_LAYOUT.statusBarHeight)
  const windowHeight = useMemo(() => getWindowInfo().height, [])
  const anchors = useMemo(() => [100, Math.round(0.5 * windowHeight), windowHeight - navigationHeight], [navigationHeight, windowHeight])
  const [job, setJob] = useImmer({
    list: [] as HomeJobListResult[]
  })
  useEffect(() => {
    getHomecompanydetailCompanyId(Number(params.id))
    .send()
    .then(info => {
      setInfo(info)
      if (info.introduce) {
        setIntro(draft => {
          ;(["introduce", "history", "honor", "culture"] as const).forEach((field, index) => {
            if (isSetValue(info.introduce[field])) {
              draft.items[index].content = info.introduce[field].replace(/\r?\n+/g, "")
            }
          })
        })
      }
      if (info.videos?.length) {
        setAlbum(draft => {
          draft.items[0].items.push(...info.videos!)
        })
      }
      if (info.pictures?.length) {
        setAlbum(draft => {
          draft.items[1].items.push(...info.pictures!)
        })
      }
      if (info.development?.itemNameList?.length) {
        setDevelopment(draft => {
          info.development.itemNameList!.forEach(item => {
            if (Forwards.findIndex(({value}) => value === item) !== -1) {
              draft.forward.items.push(item)
            } else if (Gifts.findIndex(({value}) => value === item) !== -1) {
              draft.gift.items.push(item)
            } else if (Powers.findIndex(({value}) => value === item) !== -1) {
              draft.power.items.push(item)
            }
          })
        })
      }
    })
    getHomecompanyjobsCompanyId(Number(params.id))
    .send()
    .then(list => {
      setJob(draft => {
        draft.list = list
      })
    })
  }, [])
  function formatTime(time?: string) {
    if (!time) return time
    const hour = Number(time.split(":")[0])
    return (hour >= 12 ? "下午" : "上午").concat(time)
  }
  function handleJobTap(job: HomeJobListResult) {
    navigate(pageMapper.position.job, {id: job.id})
  }
  function renderWorktime() {
    return (
      <View className="box-border pt-[32px] pb-[68px]">
        <View className="flex flex-row items-center relative px-[36px]">
          <GpFontIcon name="icon-shijianyufuli" size={36} color="white" />
          <Text className="text-white text-[36px] leading-[36px] font-bold pl-[16px]">工作时间与福利</Text>
          <GpFontIcon name="icon-a-jiantou_youda" size={36} color="white" className="ml-auto" onClick={() => {
            setOverlay(draft => {
              draft.worktime.open = true
            })
          }} />
          <View className="absolute size-[28px] rounded-[50%] left-[32px] -top-[4px]" style={{
            background: `linear-gradient(143deg, #07a9fa80 12.24%, #07a9fa00 76.02%)`
          }}></View>
        </View>
        <View className="flex flex-row items-center gap-[72px] px-[32px] mt-[40px]">
          <View className="flex flex-row items-center gap-[12px]">
            <GpFontIcon name="icon-shijian" size={40} color="white" />
            <View className="text-white text-[28px] leading-[28px]">
              {formatTime(info?.workTime?.startTime)} - {formatTime(info?.workTime?.endTime)}
            </View>
          </View>
          <View className="flex flex-row items-center gap-[12px]">
            <GpFontIcon name="icon-jiabanqingkuang" size={40} color="white" />
            <View className="text-white text-[28px] leading-[28px]">
              {info?.workTime?.overTime} · {info?.workTime?.rest}
            </View>
          </View>
        </View>
        {
          info?.welfares && info.welfares.length
          ? (
            <View className="pl-[32px] w-full box-border mt-[28px]">
              <ScrollView
                scrollX
                scrollWithAnimation
                style={{width:"100%"}}
              >
                <View className="flex flex-row flex-nowrap items-center gap-[20px]">
                  {
                    info.welfares.map((item, index) => (
                      <View key={index} className="flex-none flex flex-row items-center gap-[12px] h-[80px] pr-[28px] pl-[20px] rounded-[16px] border-[2px] border-solid border-white/20">
                        {
                          item.logo.startsWith("http")
                          ? <Image src={item.logo} className="size-[40px] object-cover" />
                          : <GpFontIcon name={item.logo} size={40} color="white" family="iconfont-fuli" />
                        }
                        <Text className="text-white text-[28px] leading-[28px]">{item.title}</Text>
                      </View>
                    ))
                  }
                </View>
              </ScrollView>
            </View>
          ) : null
        }
      </View>
    )
  }
  function renderIntro() {
    return (
      <View className="box-border pt-[32px] pb-[68px]">
        <View className="flex flex-row items-center relative px-[36px]">
          <GpFontIcon name="icon-gongsijieshao" size={36} color="white" />
          <Text className="text-white text-[36px] leading-[36px] font-bold pl-[16px]">公司介绍</Text>
          <GpFontIcon name="icon-a-jiantou_youda" size={36} color="white" className="ml-auto" onClick={() => {
            setOverlay(draft => {
              draft.intro.open = true
            })
          }} />
          <View className="absolute size-[28px] rounded-[50%] left-[32px] -top-[4px]" style={{
            background: `linear-gradient(143deg, #07a9fa80 12.24%, #07a9fa00 76.02%)`
          }}></View>
        </View>
        <View className="px-[32px] box-border mt-[40px]">
          <View className="flex flex-row items-center gap-[32px]">
            {
              intro.items.filter(item => item.content).map(item => (
                <View key={item.value} className={clsx("h-[48px] leading-[48px] px-[24px] text-[24px] rounded-[24px]",
                  item.value === intro.current ? "bg-white text-[#141B25] font-medium" : "bg-[#FFFFFF]/8 text-white/60"
                )} onClick={() => {
                  if (intro.current === item.value) return
                  setIntro(draft => {
                    draft.current = item.value
                  })
                }}>
                  {item.label}
                </View>
              ))
            }
          </View>
          <View className="mt-[32px] text-white">
            <TextEllipsis key={intro.current}
              content={intro.items[intro.current].content}
              rows={4}
              expandText="查看更多"
              collapseText="收起"
              className="!text-white"
            />
          </View>
        </View>
        <View className="mx-[32px] box-border mt-[32px] h-[172px] rounded-[24px] bg-[#496EA9]/8 flex flex-col justify-center gap-[18px] px-[28px]">
          <View className="text-white text-[32px] leading-[32px] font-bold">
            公司地址
          </View>
          <View className="flex flex-row items-center gap-[16px]">
            <GpFontIcon name="icon-gongsidizhidingwei" color="white" size={36} className="flex-none" />
            <View className="text-white text-[28px] flex-1 w-0 truncate">
              {info?.baseInfo?.address}
            </View>
            <GpTouchableView className="flex-none flex flex-row items-center px-[24px] gap-[8px] h-[60px] bg-white/8 rounded-[30px]" onClick={() => {
              const [longitude, latitude] = bd09togcj02(info?.baseInfo?.lng!, info?.baseInfo?.lat!)
              Taro.openLocation({
                latitude,
                longitude,
                address: info?.baseInfo?.address,
                name: info?.baseInfo?.fullName,
                scale: 15
              })
            }}>
              <GpFontIcon name="icon-daohang" color="white" size={28} />
              <Text className="text-white text-[28px]">导航</Text>
            </GpTouchableView>
          </View>
        </View>
      </View>
    )
  }
  function renderMainBusiness() {
    if (!info?.businesses || info.businesses.length === 0) return null
    return (
      <View className="box-border pt-[32px] pb-[68px]">
        <View className="flex flex-row items-center relative px-[36px]">
          <GpFontIcon name="icon-zhuyingyewu" size={36} color="white" />
          <Text className="text-white text-[36px] leading-[36px] font-bold pl-[16px]">主营业务</Text>
          <View className="absolute size-[28px] rounded-[50%] left-[32px] -top-[4px]" style={{
            background: `linear-gradient(143deg, #07a9fa80 12.24%, #07a9fa00 76.02%)`
          }}></View>
        </View>
        <View className="flex flex-row flex-wrap gap-[20px] mt-[40px] px-[32px]">
          {
            info.businesses.map((item, index) => (
              <View key={index} className="h-[80px] leading-[80px] box-border px-[28px] text-white text-[28px] border-[2px] border-solid border-white/20 rounded-[16px]">
                {item.name}
              </View>
            ))
          }
        </View>
      </View>
    )
  }
  function renderAlbum() {
    if (album.items.every(({items}) => items.length === 0)) return null
    return (
      <View className="box-border pt-[32px] pb-[68px]">
        <View className="flex flex-row items-center relative px-[36px]">
          <GpFontIcon name="icon-xiangce" size={36} color="white" />
          <Text className="text-white text-[36px] leading-[36px] font-bold pl-[16px]">公司相册</Text>
          <GpFontIcon name="icon-a-jiantou_youda" size={36} color="white" className="ml-auto" onClick={() => {
            setOverlay(draft => {
              draft.media[album.current === 0 ? "video" : "picture"] = true
            })
          }} />
          <View className="absolute size-[28px] rounded-[50%] left-[32px] -top-[4px]" style={{
            background: `linear-gradient(143deg, #07a9fa80 12.24%, #07a9fa00 76.02%)`
          }}></View>
        </View>
        <View className="mt-[40px]">
          <View className="flex flex-row items-center gap-[32px] px-[32px]">
            {
              album.items.map(item => (
                <View key={item.value} className={clsx("h-[48px] leading-[48px] px-[24px] text-[24px] rounded-[24px]",
                  item.value === album.current ? "bg-white text-[#141B25] font-medium" : "bg-[#FFFFFF]/8 text-white/60"
                )} onClick={() => {
                  if (album.current === item.value) return
                  setAlbum(draft => {
                    draft.current = item.value
                  })
                }}>
                  {item.label}
                </View>
              ))
            }
          </View>
          <View className="pl-[32px] box-border mt-[40px]">
            <ScrollView
              scrollX
              scrollWithAnimation
              style={{width: "100%"}}
            >
              <View className="flex flex-row flex-nowrap gap-[20px]">
                {
                  album.current === 0
                  ? album.items[0].items.map(item => (
                    <View key={item.id} className="relative w-[400px] h-[300px] rounded-[16px] overflow-hidden flex-none">
                      <Image src={item.coverImg!} className="size-full object-cover" />
                      <View className="absolute inset-0 flex flex-row justify-center items-center bg-black/40">
                        <GpFontIcon name="icon-bofang" size={80} color="white" />
                      </View>
                    </View>
                  ))
                  : album.items[1].items.map((item, index) => (
                    <View key={index} className="relative w-[400px] h-[300px] rounded-[16px] overflow-hidden flex-none">
                      <Image src={item.url} className="size-full object-cover" />
                    </View>
                  ))
                }
              </View>
            </ScrollView>
          </View>
        </View>
      </View>
    )
  }
  function renderDevelopment() {
    if (!info?.development || !info.development.itemNameList?.length) return null
    return (
      <View className="box-border pt-[32px] pb-[68px]">
        <View className="flex flex-row items-center relative px-[36px]">
          <GpFontIcon name="icon-rencaifazhan" size={36} color="white" />
          <Text className="text-white text-[36px] leading-[36px] font-bold pl-[16px]">人才发展</Text>
          <GpFontIcon name="icon-a-jiantou_youda" size={36} color="white" className="ml-auto" onClick={() => {
            setOverlay(draft => {
              draft.development.open = true
            })
          }} />
          <View className="absolute size-[28px] rounded-[50%] left-[32px] -top-[4px]" style={{
            background: `linear-gradient(143deg, #07a9fa80 12.24%, #07a9fa00 76.02%)`
          }}></View>
        </View>
        <View className="pl-[32px] box-border mt-[40px]">
          <ScrollView
            scrollX
            scrollWithAnimation
            style={{width: "100%"}}
          >
            <View className="flex flex-row flex-nowrap gap-[20px]">
              {
                info.development.itemNameList.map((item, index) => (
                  <View key={index} className="h-[80px] leading-[80px] box-border px-[28px] text-white text-[28px] border-[2px] border-solid border-white/20 rounded-[16px] flex-none">
                    {item}
                  </View>
                ))
              }
            </View>
          </ScrollView>
        </View>
      </View>
    )
  }
  function renderProduct() {
    if (!info?.products || info.products.length === 0) return null
    return (
      <View className="box-border pt-[32px] pb-[68px]">
        <View className="flex flex-row items-center relative px-[36px]">
          <GpFontIcon name="icon-chanpin" size={36} color="white" />
          <Text className="text-white text-[36px] leading-[36px] font-bold pl-[16px]">公司产品</Text>
          <GpFontIcon name="icon-a-jiantou_youda" size={36} color="white" className="ml-auto" onClick={() => {
            setOverlay(draft => {
              draft.product.open = true
            })
          }} />
          <View className="absolute size-[28px] rounded-[50%] left-[32px] -top-[4px]" style={{
            background: `linear-gradient(143deg, #07a9fa80 12.24%, #07a9fa00 76.02%)`
          }}></View>
        </View>
        <View className="pl-[32px] box-border mt-[40px]">
          <ScrollView
            scrollX
            scrollWithAnimation
            style={{width: "100%"}}
          >
            <View className="flex flex-row flex-nowrap gap-[64px]">
              {
                info.products.map(item => (
                  <View key={item.id} className="h-[96px] box-border flex-none flex flex-row items-center gap-[24px]">
                    <Image src={item.logoUrl} className="w-[96px] h-full object-cover rounded-[16px]" />
                    <Text className="text-white text-[32px]">
                      {item.name}
                    </Text>
                  </View>
                ))
              }
            </View>
          </ScrollView>
        </View>
      </View>
    )
  }
  function renderOverlays() {
    return <View>
      {renderOverlayIntro()}
      {renderOverlayWorktime()}
      {renderOverlayDevelopment()}
      {renderOverlayPicture()}
      {renderOverlayVideo()}
      {renderOverlayProduct()}
      {renderOverlayJobList()}
    </View>
  }
  function renderOverlayIntro() {
    return (
      <Popup rounded placement="bottom" lock open={overlay.intro.open} onClose={() => {
        setOverlay(draft => {
          draft.intro.open = false
        })
      }}>
        <View className="flex flex-row items-center justify-between h-[108px] px-[32px]">
          <Text className="text-primary text-[36px] font-bold">
            企业介绍
          </Text>
          <GpFontIcon name="icon-guanbi" size={48} color="#707275" onClick={() => {
            setOverlay(draft => {
              draft.intro.open = false
            })
          }}/>
        </View>
        <View className="py-[16px]">
          <ScrollView
            scrollY
            scrollWithAnimation
            style={{height: "50vh"}}
            scrollIntoView={`scrollIntoView_${overlay.intro.active}`}
          >
            <View className="flex flex-row gap-[48px] items-center justify-center py-[48px]">
              {
                intro.items.filter(item => item.content).map(item => (
                  <View key={item.value} className="flex flex-col gap-[24px] items-center" onClick={() => {
                    if (overlay.intro.active === item.value) return
                    setOverlay(draft => {
                      draft.intro.active = item.value
                    })
                  }}>
                    <Text className={clsx("text-[32px]", item.value === overlay.intro.active ? "text-theme font-bold" : "text-[#496EA9]")}>
                      {item.label}
                    </Text>
                    <GpVerticelLine width={32} height={6} className={clsx("rounded-[4px]", {
                      "invisible": item.value !== overlay.intro.active
                    })} />
                  </View>
                ))
              }
            </View>
            {
              intro.items.filter(item => item.content).map(item => (
                <View key={item.value} className="px-[32px] mb-[64px] last:mb-0" id={`scrollIntoView_${item.value}`}>
                  <View className="text-primary text-[36px] leading-[36px] font-bold mb-[32px]">
                    {item.label}
                  </View>
                  <Text className="text-primary text-[32px] leading-[56px] break-all whitespace-pre-line">
                    {item.content}
                  </Text>
                </View>
              ))
            }
          </ScrollView>
        </View>
      </Popup>
    )
  }
  function renderOverlayWorktime() {
    return (
      <Popup rounded placement="bottom" lock open={overlay.worktime.open} onClose={() => {
        setOverlay(draft => {
          draft.worktime.open = false
        })
      }}>
        <View className="flex flex-row items-center justify-between h-[108px] px-[32px]">
          <Text className="text-primary text-[36px] font-bold">
            工作时间与福利
          </Text>
          <GpFontIcon name="icon-guanbi" size={48} color="#707275" onClick={() => {
            setOverlay(draft => {
              draft.worktime.open = false
            })
          }}/>
        </View>
        <View className="py-[28px] px-[32px]">
          <ScrollView
            scrollY
            scrollWithAnimation
            style={{height: "50vh"}}
          >
            <Text className="text-[28px] leading-[40px] text-[#496EA9]">
              福利信息由公司提供，可能根据实际岗位有所不同。具体岗位可与BOSS或HR确认。
            </Text>
            <View className="mt-[80px]">
              <Text className="text-primary text-[36px] leading-[36px] font-bold">工作时间</Text>
              <View className="flex flex-row items-center gap-[12px] mt-[48px]">
                <GpFontIcon name="icon-shijian" color="#CED4DB" size={48} />
                <Text className="text-primary text-[30px] font-medium">
                  {info?.workTime?.startTime} - {info?.workTime?.endTime}
                </Text>
              </View>
              <View className="flex flex-row items-center gap-[12px] mt-[20px]">
                <GpFontIcon name="icon-jiabanqingkuang" color="#CED4DB" size={48} />
                <Text className="text-primary text-[30px] font-medium">
                  {formatTime(info?.workTime?.overTime)} · {formatTime(info?.workTime?.rest)}
                </Text>
              </View>
            </View>
            {
              info?.welfares && info.welfares.length
              ? (
                <View className="mt-[96px]">
                  <Text className="text-primary text-[36px] leading-[36px] font-bold">员工福利</Text>
                  {
                    info.welfares.map((item, index) => (
                      <View key={index} className="mt-[64px] flex flex-row items-center gap-[40px]">
                        {
                          item.logo.startsWith("http")
                          ? <Image src={item.logo} className="size-[80px] object-cover" />
                          : <GpFontIcon name={item.logo} size={80} color="#ACAEB2" family="iconfont-fuli" />
                        }
                        <View className="flex flex-col gap-[8px]">
                          <Text className="text-primary text-[32px] leading-[48px] font-medium">
                            {item.title}
                          </Text>
                          <Text className="text-third text-[26px] leading-[36px]">
                            {item.desc}
                          </Text>
                        </View>
                      </View>
                    ))
                  }
                </View>
              ) : null
            }
          </ScrollView>
        </View>
      </Popup>
    )
  }
  function renderOverlayDevelopment() {
    return (
      <Popup rounded placement="bottom" lock open={overlay.development.open} onClose={() => {
        setOverlay(draft => {
          draft.development.open = false
        })
      }}>
        <View className="flex flex-row items-center justify-between h-[108px] px-[32px]">
          <Text className="text-primary text-[36px] font-bold">
            人才发展
          </Text>
          <GpFontIcon name="icon-guanbi" size={48} color="#707275" onClick={() => {
            setOverlay(draft => {
              draft.development.open = false
            })
          }}/>
        </View>
        <View className="py-[28px] px-[32px]">
          <ScrollView
            scrollY
            scrollWithAnimation
            style={{height: "50vh"}}
          >
            <Text className="text-[28px] leading-[40px] text-[#496EA9]">
              员工培养和晋升机制信息由公司提供,具体岗位情况可与BoSS或HR确认。
            </Text>
            <View className="mt-[80px]">
              {
                development.forward.items.length > 0
                ? (
                  <View className="mb-[64px]">
                    <Text className="text-primary text-[36px] leading-[36px] font-bold">
                      {development.forward.label}
                    </Text>
                    <View className="mt-[40px] flex flex-row flex-wrap gap-[20px]">
                      {
                        development.forward.items.map((item, index) => (
                          <View key={index} className="flex flex-row px-[28px] h-[76px] leading-[76px] border-[2px] border-solid border-[#CED4DB] rounded-[16px] text-primary text-[28px] font-medium">
                            {item}
                          </View>
                        ))
                      }
                    </View>
                  </View>
                ) : null
              }
              {
                development.gift.items.length > 0
                ? (
                  <View className="mb-[64px]">
                    <Text className="text-primary text-[36px] leading-[36px] font-bold">
                      {development.gift.label}
                    </Text>
                    <View className="mt-[40px] flex flex-row flex-wrap gap-[20px]">
                      {
                        development.gift.items.map((item, index) => (
                          <View key={index} className="flex flex-row px-[28px] h-[76px] leading-[76px] border-[2px] border-solid border-[#CED4DB] rounded-[16px] text-primary text-[28px] font-medium">
                            {item}
                          </View>
                        ))
                      }
                    </View>
                  </View>
                ) : null
              }
              {
                development.power.items.length > 0
                ? (
                  <View className="mb-[64px]">
                    <Text className="text-primary text-[36px] leading-[36px] font-bold">
                      {development.power.label}
                    </Text>
                    <View className="mt-[40px] flex flex-row flex-wrap gap-[20px]">
                      {
                        development.power.items.map((item, index) => (
                          <View key={index} className="flex flex-row px-[28px] h-[76px] leading-[76px] border-[2px] border-solid border-[#CED4DB] rounded-[16px] text-primary text-[28px] font-medium">
                            {item}
                          </View>
                        ))
                      }
                    </View>
                  </View>
                ) : null
              }
              {
                info?.development?.developmentDescription
                ? (
                  <View className="mb-[64px]">
                    <View className="text-primary text-[36px] leading-[36px] font-bold mb-[40px]">
                      更多信息
                    </View>
                    <Text className="text-primary text-[32px] leading-[56px] break-all whitespace-pre-line">
                      {info.development.developmentDescription}
                    </Text>
                  </View>
                ) : null
              }
            </View>
          </ScrollView>
        </View>
      </Popup>
    )
  }
  function renderOverlayPicture() {
    return (
      <Popup rounded placement="bottom" lock open={overlay.media.picture} onClose={() => {
        setOverlay(draft => {
          draft.media.picture = false
        })
      }}>
        <View className="flex flex-row items-center justify-between h-[108px] px-[32px]">
          <Text className="text-primary text-[36px] font-bold">
            企业相册
          </Text>
          <GpFontIcon name="icon-guanbi" size={48} color="#707275" onClick={() => {
            setOverlay(draft => {
              draft.media.picture = false
            })
          }}/>
        </View>
        <View className="py-[48px] px-[32px]">
          <ScrollView
            scrollY
            scrollWithAnimation
            style={{height: "50vh"}}
          >
            <View className="flex flex-row gap-[18px] flex-wrap">
              {
                album.items[1].items.map((item, index) => (
                  <Image key={index} src={item.url} className="w-[334px] h-[250px] rounded-[8px] object-cover" onClick={() => {
                    Taro.previewImage({
                      current: item.url,
                      urls: album.items[1].items.map(({url}) => url)
                    })
                  }} />
                ))
              }
            </View>
          </ScrollView>
        </View>
      </Popup>
    )
  }
  function renderOverlayVideo() {
    return (
      <Popup rounded placement="bottom" lock open={overlay.media.video} onClose={() => {
        setOverlay(draft => {
          draft.media.video = false
        })
      }}>
        <View className="flex flex-row items-center justify-between h-[108px] px-[32px]">
          <Text className="text-primary text-[36px] font-bold">
            企业视频
          </Text>
          <GpFontIcon name="icon-guanbi" size={48} color="#707275" onClick={() => {
            setOverlay(draft => {
              draft.media.video = false
            })
          }}/>
        </View>
        <View className="py-[48px] px-[32px]">
          <ScrollView
            scrollY
            scrollWithAnimation
            style={{height: "50vh"}}
          >
            <View className="flex flex-row gap-[18px] flex-wrap">
              {
                album.items[0].items.map((item, index) => (
                  <View key={index}>
                    <View className="w-[334px] h-[250px] rounded-[8px] overflow-hidden relative">
                      <Image src={item.coverImg!} className="w-full h-full object-cover" />
                      <View className="absolute inset-0 flex flex-row justify-center items-center bg-black/40" onClick={() => {
                        Taro.previewMedia({
                          sources: album.items[0].items.map(item => ({
                            url: item.video,
                            type: "video",
                            poster: item.coverImg
                          })),
                          current: index
                        })
                      }}>
                        <GpFontIcon name="icon-bofang" size={80} color="white" />
                      </View>
                    </View>
                    <View className="pt-[20px] pb-[14px] text-primary text-[28px] leading-[36px] text-center">
                      {item.title}
                    </View>
                  </View>
                ))
              }
            </View>
          </ScrollView>
        </View>
      </Popup>
    )
  }
  function renderOverlayProduct() {
    return (
      <Popup rounded placement="bottom" lock open={overlay.product.open} onClose={() => {
        setOverlay(draft => {
          draft.product.open = false
        })
      }}>
        <View className="flex flex-row items-center justify-between h-[108px] px-[32px]">
          <Text className="text-primary text-[36px] font-bold">
            企业产品
          </Text>
          <GpFontIcon name="icon-guanbi" size={48} color="#707275" onClick={() => {
            setOverlay(draft => {
              draft.product.open = false
            })
          }}/>
        </View>
        <Swiper
          className='w-screen h-[860px] box-border'
          circular
          current={overlay.product.current}
          onChange={({detail: {current}}) => {
            setOverlay(draft => {
              draft.product.current = current
            })
          }}
        >
          {
            info?.products?.map(item => (
              <SwiperItem key={item.id}>
                <View className="w-screen flex-none text-[40px] inline-block pt-[96px]">
                  <View className="flex flex-col items-center">
                    <View className="size-[176px] rounded-[16px] border-[2px] border-solid border-[#EEEEEE] overflow-hidden">
                      <Image src={item.logoUrl} className="size-full object-cover" />
                    </View>
                    <Text className="text-primary text-[32px] leading-[32px] font-bold mt-[32px]">{item.name}</Text>
                    <Text className="text-third text-[28px] leading-[28px] mt-[12px]">{item.slogan}</Text>
                  </View>
                  <View className="px-[32px] mt-[48px]">
                    <TextEllipsis
                      content={item.bright}
                      rows={3}
                      expandText="展开"
                      collapseText="收起"
                      className="!text-third !text-[28px] !leading-[40px]"
                    />
                    {
                      item.picList && item.picList.length
                      ? (
                        <ScrollView
                          scrollX
                          scrollWithAnimation
                          style={{width: "100%", whiteSpace: "nowrap", marginTop: 17}}
                        >
                          {
                            item.picList.map((pic, index) => (
                              <View key={index} className="size-[144px] rounded-[12px] inline-block border-[2px] border-solid border-[#EEEEEE] ml-[16px]">
                                <Image src={pic} className="object-cover size-full" />
                              </View>
                            ))
                          }
                        </ScrollView>
                      )
                      : null
                    }
                  </View>
                </View>
              </SwiperItem>
            ))
          }
        </Swiper>
        <View className="py-[36px] flex flex-row justify-center gap-[8px]">
          {
            info?.products?.map((_, index) => (
              <View key={index} className={clsx("rounded-[8px] size-[8px] transition-all duration-300",
                index === overlay.product.current ? "bg-theme w-[32px] rounded-[46px]" : "bg-theme/50"
              )}></View>
            ))
          }
        </View>
        <SafeArea position="bottom" />
      </Popup>
    )
  }
  function renderOverlayJobList() {
    return (
      <FloatingPanel anchors={anchors} height={anchors[0]} className="!z-[1009]">
        <View className="bg-[#F4F6FC]">
          <View className="text-primary text-[32px] leading-[32px] font-bold p-[32px] bg-white">
            在招职位 · {job.list.length}
          </View>
          <View className="p-[16px] box-border flex flex-col gap-[16px]">
            {
              job.list.map(item => (
                <View key={item.id} className="relative pb-[16px]" onClick={() => handleJobTap(item)}>
                  <View className="box-border h-[304px] px-[24px] flex flex-col justify-center rounded-[24px] bg-white">
                    <View className="flex flex-row gap-[24px]">
                      <Text className="truncate flex-1 w-0 text-primary text-[36px] leading-[36px] font-bold">{item.name}</Text>
                      <Text className="flex-none text-[32px] leading-[32px] font-bold text-theme">{getSalaryText(item)}{item.salaryCount ? `·${item.salaryCount}薪` : null}</Text>
                    </View>
                    <View className="flex flex-row items-center text-[28px] leading-[28px] text-secondary gap-[40px] mt-[28px]">
                      <View className="max-w-[304px] truncate">{item.companyName}</View>
                      <View>{item.companyIndustryName}</View>
                      <View>{item.companyScale}</View>
                    </View>
                    <View className="flex flex-row flex-nowrap gap-[8px] items-center mt-[20px]">
                      <View className="h-[48px] leading-[48px] px-[16px] bg-[#F4F6FC] rounded-[8px] text-[26px] text-secondary">
                        {item.experienceDisplay}
                      </View>
                      <View className="h-[48px] leading-[48px] px-[16px] bg-[#F4F6FC] rounded-[8px] text-[26px] text-secondary">
                        {item.educationDisplay}
                      </View>
                      <View className="h-[48px] leading-[48px] px-[16px] bg-[#F4F6FC] rounded-[8px] text-[26px] text-secondary">
                        {item.workModeJson?.name}
                      </View>
                      <View className="h-[48px] leading-[48px] px-[16px] bg-[#F4F6FC] rounded-[8px] text-[26px] text-secondary">
                        {item.jobTypeName}
                      </View>
                    </View>
                    <View className="flex flex-row items-center gap-[16px] mt-[24px]">
                      <View className="rounded-[50%] overflow-hidden size-[40px] flex-none">
                        <Image src={item.publishUserAvatar ?? __DEF_AVATAR__} className="size-full object-conver" />
                      </View>
                      <View className="flex-1 w-0 box-border text-primary leading-[24px] text-[24px]">
                        {item.publishUserName} · HR
                      </View>
                      <View className="flex-none text-third leading-[24px] text-[24px]">
                        {item.jobAddress?.regionName} · {item.jobAddress?.address}·距你{item.distance}km
                      </View>
                    </View>
                  </View>
                </View>
              ))
            }
          </View>
        </View>
      </FloatingPanel>
    )
  }
  return (
    <GpContainer className="bg-[#141B25] relative" pageGap={`${anchors[0]}px`}>
      <GpNavbar
        navigationBarTitleText={null}
        navigationBarBackgroundColor={`rgba(255, 255, 255, ${opacity})`}
        placeholderClassName="bg-transparent"
        onLayout={({statusBarHeight, navigationHeight}) => setNavigationHeight(statusBarHeight + navigationHeight)}
      />
      <View className="absolute top-0 left-0 right-0 h-[400px] z-0">
        <Image src={info?.pictures?.length ? info.pictures[0].url : "/static/images/position/company-bg.png"} className="w-full h-full object-cover" />
        <View className="absolute inset-0 bg-linear-180 from-0% from-[#141B25]/30 to-100% to-[#141B25]"></View>
      </View>
      <View className="flex flex-row items-center gap-[28px] px-[32px] pt-[40px] pb-[52px] relative z-[1]">
        <Image src={info?.baseInfo?.logo ?? __DEF_COMPANY_LOGO__} className="size-[112px] rounded-[12px] object-cover" />
        <View className="flex flex-col justify-center gap-[20px]">
          <Text className="text-white text-[56px] leading-[56px] font-bold">
            {info?.baseInfo?.name}
          </Text>
          <Text className="text-white/80 text-[28px] leading-[28px]">
            {info?.baseInfo?.stage} · {info?.baseInfo?.scale} · {info?.baseInfo?.industry}
          </Text>
        </View>
      </View>
      {renderWorktime()}
      {renderIntro()}
      {renderMainBusiness()}
      {renderAlbum()}
      {renderDevelopment()}
      {renderProduct()}
      {renderOverlays()}
    </GpContainer>
  )
}
